<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <link rel="stylesheet" href="/public/asset/bootstrap.min.css">
  <link rel="stylesheet" href="/public/asset/bootstrap-icons-141.css">
  <link rel="stylesheet" href="/public/asset/style.css">
  
  <script src="/public/asset/jquery.min.js"></script>
  <script src="/public/asset/dayjs.min.js"></script>
  <script src="/public/asset/bootstrap.bundle.min.js"></script>
  <script src="/public/asset/util.js"></script>
  <script src="/public/asset/follow-islands.js"></script>
  
  <title>Follow Islands - iPelago</title>
</head>
<body>
  <div id="root" class="container" style="max-width: 775px; min-width: 400px;"></div>

<script>

const Alerts = CreateAlerts();
const Logs = CreateLogs();

const title = m('h1').addClass('display-6 my-5').text('Follow Islands');

const SubmitBtn = cc('button');
const Addresses = cc('textarea');
const AddressesArea = cc('div', null, [
  m('p').text('请把小岛地址粘贴到下面的文本框中，一行一个地址。然后点击 Submit 按钮。'),
  m(Addresses).addClass('form-control').on('input', () => {
    const self = $(Addresses.id);
    self.css('height', self.prop('scrollHeight'));
  }),
  m('p').addClass('text-center my-3').append(
    m(SubmitBtn).text('Submit').attr({type:'button'}).addClass('btn btn-primary')
  ),
]);

$('#root').append([
  title,
  m(Alerts).addClass('my-3'),
  m(AddressesArea),
  m(Logs),
]);

init();

function init() {
  $(SubmitBtn.id).click(() => {
    disable(SubmitBtn.id);

    const addresses = $(Addresses.id).val().split('\n')
      .map(item => item.trim())
      .filter(item => item.length > 0);

    followIslands(addresses);
    // 在 followIslands 之后如果有代码，会立即执行，不会等待 followIslands。
  });
}

</script>
</body>
</html>